import styled from "styled-components";

export const HeaderContainer = styled.div`
    .logo {
        a {
            display:block;

            img{
                height:56px;
            }
        }
    }
    .flexBetween{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .navCenter {
        width:960px; display: flex; align-items: center; justify-content: space-between;
    }
    .navCenter>div{
        display:flex;justify-content:start;align-content:center;
    }
    .navRight{
        display:flex;justify-content:start;align-content:center;
    }
    .flexBetween div a{
        display:block
    }
    .toHome{color: #ea6f5a; font-size: 17px; padding: 15px;}
    .download{font-size: 17px; padding: 15px;}
    .search{display: flex; align-items: center; margin-left: 25px;position:relative;}
    .search input{width: 100px; background: #eee; border: none; height: 36px; padding: 0 30px 0 15px; border-radius: 18px;outline:none;}
    .changeFont{color: #969696; font-size: 17px; padding: 15px; font-weight: bold;}
    .vip{display: flex; align-items: center;}
    .vip img{height: 25px;}
    .navRight{display: flex; align-items: center;}
    .login{color: #969696; font-size: 15px; padding: 15px;}
    .reg{color: #ea6f5a; font-size: 15px; border: 1px solid #ea6f5a; padding: 0px 22px; border-radius: 17px; height: 34px; line-height: 34px; margin-left: 15px;}
    .edit{color: white; font-size: 15px; border: 1px solid #ea6f5a; padding: 0px 22px; border-radius: 17px; height: 34px; line-height: 34px; background: #ea6f5a; margin-left: 15px;}
    .searchicon{position: absolute; right: 3px; font-size: 17px; padding: 3px; color: #969696;border-radius:50%;}
    .searchiconChange{background-color:#969696;color:white}
    .search .searchTransition-enter{transition:all .5s;}
    .search .searchTransition-enter-active{width:180px;}
    .search .searchTransition-enter-done{width:180px;}
    .search .searchTransition-exit{transition:all .5s;}
    .search .searchTransition-exit-active{width:100px;}
    .search .searchTransition-exit-done{width:100px;}
    .searchTransition-exit-active{width:100px; transition:all .9s ease-in;}
    .searchPop{position: absolute; top: 54px; left: 30px; background-color: #fff; box-shadow: 0 0 8px rgba(0,0,0,.2); width: 190px; padding: 15px 15px 5px;}
    .searchPopTitle{display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: #969696;}
    .changeItem{font-size: 11px;}
    .searchPopContent{display: flex; flex-wrap: wrap;margin-top: 10px;}
    .searchPopContent span{margin-right: 10px; display: inline-block;margin-bottom: 8px;}
    .searchPopContent span a{padding: 2px 6px; font-size: 12px; color: #787878; border: 1px solid #ddd; border-radius: 3px; line-height: 12px;}
    .searchwrap{display: flex; justify-content: center; align-items: center; position: relative;}
`